<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test--vue遍历与点击操作</title>

    <style>
        *{
            margin: 0 auto;
            padding: 0 auto;
        }
        ul,li{
            list-style: none;
        }
        li{
            line-height: 40px;
            background: #f4f3f3;
            box-sizing: border-box;
            padding: 0 30px;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
        }
        li.changeBg{
            background: #999;
        }
        #demo{
            width: 80%;
            margin: 10px auto;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

    <div id="demo">
        <ul>
            <li flagId=0 v-for="book in books" @click.stop="clickHandle($event)">
                {{ book.bId }} {{ book.bName }} {{ book.bPrice }}
            </li>
        </ul>

        <!--当前对象下有其他元素的点击操作-->
        <ul>
            <li v-on:click="clickHandle1($event)" flagid=1>
                <span>1</span>
                <span>标题</span>
                <span>内容</span>
                <span>时间</span>
            </li>
        </ul>


        
    </div>
    <script src="http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js"></script>

    <script>
        new Vue({
            el:'#demo',
            data:{
                books: [{
                    bId: 1,
                    bName: '红楼梦',
                    bAuthor: '曹雪芹',
                    bPrice: '100'
                }, {
                    bId: 2,
                    bName: '三国演义',
                    bAuthor: '罗贯中',
                    bPrice: '40'
                }, {
                    bId: 3,
                    bName: '水浒传',
                    bAuthor: '施耐庵',
                    bPrice: '60'
                }],
            },
            methods:{
                clickHandle:function(e){
                    console.log('点击了...');
                    console.log(e.target);
                    console.log(e.target.getAttribute('flagid'));
                    var flagId = e.target.getAttribute('flagid');
                    console.log(flagId);

                    if(flagId==0){
                        //当前是未点击状态下的情况
                        var liList = document.querySelectorAll('li'); //获取列表项
                        console.log(liList.length);
                        //循环遍历列表，使列表项的flagID都置为初始化值：0
                        for(var i=0;i<liList.length;i++){
                            console.log(liList[i]);
                            liList[i].setAttribute('flagid',0);
                            liList[i].setAttribute('class',' ');
                        }
                        flagId = 1;

                        e.target.setAttribute('flagid',flagId);

                        e.target.setAttribute('class','changeBg'); //添加点击效果，原生JS动态添加class属性
                    }
                    // else{
                    //     //此时flagid = 1时，点击时对按钮的操作
                    //     flagId = 0;

                    //     e.target.setAttribute('flagid',flagId);  //原生JS动态修改flagID属性值

                    //     liList[i].setAttribute('class',' ');//不添加点击效果，原生JS动态添加属性class
                    // }
                },

                clickHandle1:function(e){
                    console.log(this);
                    console.log('点击了...');
                    console.log(e.currentTarget);   //e.currentTarget  表示绑定事件的元素
                    console.log(e.target);  // e.target  表示当前点击的元素
                    var currentTarget = e.currentTarget
                    console.log(currentTarget.getAttribute('flagid'));
                    var flagId = currentTarget.getAttribute('flagid');
                    console.log(flagId);

                    if(flagId==0){
                        //当前是未点击状态下的情况
                        var liList = document.querySelectorAll('li'); //获取列表项
                        console.log(liList.length);
                        //循环遍历列表，使列表项的flagID都置为初始化值：0
                        for(var i=0;i<liList.length;i++){
                            console.log(liList[i]);
                            liList[i].setAttribute('flagid',0);
                            liList[i].setAttribute('class',' ');
                        }
                        flagId = 1;

                        currentTarget.setAttribute('flagid',flagId);

                        currentTarget.setAttribute('class','changeBg'); //添加点击效果，原生JS动态添加class属性
                    }
                    // else{
                    //     //此时flagid = 1时，点击时对按钮的操作
                    //     flagId = 0;

                    //     currentTarget.setAttribute('flagid',flagId);  //原生JS动态修改flagID属性值

                    //     liList[i].setAttribute('class',' ');//不添加点击效果，原生JS动态添加属性class
                    // }
                },
            }
        });
    </script>
</body>
</html>